<template>
  <div class="welcome">
    <transition>
      <!-- <h5 v-if="flag"> -->
      <div class="wrapper wrapper-content">
        <div class="row">
          <div class="col-sm-3" v-for="item,index in titleMsg" >
            <div class="ibox float-e-margins"style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div class="ibox-title">
                <span class="label pull-right" :class="titleMsgColor.txt[index]">{{item.date}}</span>
                <h5>{{item.title}}</h5>
              </div>
              <div class="ibox-content">
                <h1 class="no-margins">{{item.num}}</h1>
                <div class="stat-percent font-bold" :class="titleMsgColor.ico[index]">{{item.persent}} <i
                    :class="titleMsgIcon[item.state]"></i>
                </div>
                <small>{{item.desc}}</small>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-12">
            <div class="ibox float-e-margins" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div class="ibox-title">
                <h5>订单</h5>
              </div>
              <div class="ibox-content">
                <div class="row">
                  <div class="">
                    <div class="flot-chart col-sm-9">
                      <div style="height: 220px;" ref="flotChart"></div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <ul class="stat-list">
                      <li v-for="item in orderTab">
                        <h2 class="no-margins">{{item.num}}</h2>
                        <small>{{item.title}}</small>
                        <div class="stat-percent">{{item.persent}} <i class="text-navy"
                            :class="titleMsgIcon[item.state]"></i>
                        </div>
                        <div class="progress progress-mini">
                          <div :style="`width: ${item.persent};`" class="progress-bar"></div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-4">
            <div class="ibox float-e-margins" v-show="msgBoxFlag" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
              <div class="ibox-title">
                <h5>消息</h5>
                <div class="ibox-tools">
                  <a class="collapse-link" @click="msgFlag = !msgFlag">
                    <i :class="msgArray"></i>
                  </a>
                  <a class="close-link" @click="closeMsg">
                    <i class="el-icon-close"></i>
                  </a>
                </div>
              </div>
              <div class="ibox-content ibox-heading" v-show="msgFlag">
                <h3><i class="fa fa-envelope-o"></i> 新消息</h3>
                <small><i class="fa fa-tim"></i> 您有{{msgs.length}}条未读消息</small>
              </div>
              <div class="ibox-content" v-show="msgFlag">
                <div class="feed-activity-list">
                  <div class="feed-element" v-for="item in msgs">
                    <div>
                      <small class="pull-right text-navy" v-text="item.timesAgo"></small>
                      <strong v-text="item.name"></strong>
                      <div v-text="item.msg"></div>
                      <small class="text-muted" v-text="item.date"></small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-8">
            <div class="row">
              <div class="col-sm-6">
                <div class="ibox float-e-margins">
                  <div class="ibox-title">
                    <h5>用户项目列表</h5>
                    <div class="ibox-tools">
                      <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                      </a>
                      <a class="close-link">
                        <i class="fa fa-times"></i>
                      </a>
                    </div>
                  </div>
                  <div class="ibox-content">
                    <table class="table table-hover no-margins">
                      <thead>
                        <tr>
                          <th>状态</th>
                          <th>日期</th>
                          <th>用户</th>
                          <th>值</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><small>进行中...</small>
                          </td>
                          <td><i class="fa fa-clock-o"></i> 11:20</td>
                          <td>青衣5858</td>
                          <td class="text-navy"> <i class="fa fa-level-up"></i> 24%</td>
                        </tr>
                        <tr>
                          <td><span class="label label-warning">已取消</span>
                          </td>
                          <td><i class="fa fa-clock-o"></i> 10:40</td>
                          <td>徐子崴</td>
                          <td class="text-navy"> <i class="fa fa-level-up"></i> 66%</td>
                        </tr>
                        <tr>
                          <td><small>进行中...</small>
                          </td>
                          <td><i class="fa fa-clock-o"></i> 01:30</td>
                          <td>姜岚昕</td>
                          <td class="text-navy"> <i class="fa fa-level-up"></i> 54%</td>
                        </tr>
                        <tr>
                          <td><small>进行中...</small>
                          </td>
                          <td><i class="fa fa-clock-o"></i> 02:20</td>
                          <td>武汉大兵哥</td>
                          <td class="text-navy"> <i class="fa fa-level-up"></i> 12%</td>
                        </tr>
                        <tr>
                          <td><small>进行中...</small>
                          </td>
                          <td><i class="fa fa-clock-o"></i> 09:40</td>
                          <td>荆莹儿</td>
                          <td class="text-navy"> <i class="fa fa-level-up"></i> 22%</td>
                        </tr>
                        <tr>
                          <td><span class="label label-primary">已完成</span>
                          </td>
                          <td><i class="fa fa-clock-o"></i> 04:10</td>
                          <td>栾某某</td>
                          <td class="text-navy"> <i class="fa fa-level-up"></i> 66%</td>
                        </tr>
                        <tr>
                          <td><small>进行中...</small>
                          </td>
                          <td><i class="fa fa-clock-o"></i> 12:08</td>
                          <td>范范范二妮</td>
                          <td class="text-navy"> <i class="fa fa-level-up"></i> 23%</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="ibox float-e-margins">
                  <div class="ibox-title">
                    <h5>事项列表</h5>
                    <div class="ibox-tools">
                      <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                      </a>
                      <a class="close-link">
                        <i class="fa fa-times"></i>
                      </a>
                    </div>
                  </div>
                  <div class="ibox-content">
                    <ul class="todo-list m-t small-list ui-sortable">
                      <li v-for="item in things">
                        <template>
                          <a class="check-link"><i :class="item.done ? titleMsgIcon[7] : titleMsgIcon[8]"></i> </a>
                          <span class="m-l-xs" :class="item.done ? titleMsgIcon[10]: ''">{{item.title}}</span>
                          <small class="label label-primary" v-show="!item.done"><i class="fa fa-clock-o"></i>
                            {{item.leftTime}}</small>
                        </template>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- </h5> -->
    </transition>

  </div>
</template>

<script>
  export default {
    mounted() {
      this.painChart()
      setTimeout(() => {
        this.flag = true
      }, 100)
      let _this = this;
      window.onresize = function() {
        _this.chart.resize()
      }
    },
    data() {
      return {
        msgFlag: true,
        msgArray: 'el-icon-arrow-up',
        msgBoxFlag: true,
        titleMsg: [{
            title: '收入',
            date: '月',
            desc: '总收入',
            num: '4,886,200',
            persent: '85%',
            state: 2
          },
          {
            title: '订单',
            date: '全年',
            desc: '新订单',
            num: '26,200',
            persent: '20%',
            state: 1
          },
          {
            title: '访客',
            date: '今天',
            desc: '新访客',
            num: '3,280',
            persent: '24%',
            state: 1
          },
          {
            title: '活跃用户',
            date: '最近一月',
            desc: '12月',
            num: '6,200',
            persent: '23%',
            state: 0
          }
        ],
        orderTab: [{
            num: '2,346',
            title: '订单总数',
            persent: '48%',
            state: 1
          },
          {
            num: '4,836',
            title: '最近一个月订单',
            persent: '60%',
            state: 0
          },
          {
            num: '9,366',
            title: '最近一个月销售额',
            persent: '22%',
            state: 2
          },
        ],
        titleMsgIcon: {
          '2': 'fa fa-bolt',
          '1': 'fa fa-level-up',
          '0': 'fa fa-level-down',
          '7': 'fa fa-check-square', //勾选
          '8': 'fa fa-square-o', //未勾选
          '10': 'todo-completed' //完成
        },
        things: [{
            title: '开会',
            done: true,
            leftTime: '1小时'
          },
          {
            title: '项目发布',
            done: true,
            leftTime: '1小时'
          },
          {
            title: '修改bug',
            done: false,
            leftTime: '1小时'
          },
        ],
        titleMsgColor: {
          txt: ['label-success', 'label-info', 'label-primary', 'label-danger'],
          ico: ['text-success', 'text-info', 'text-navy', 'text-danger']
        },
        flag: false,
        chart: null,
        msgsTotol: 20,
        msgs: [{
          name: '井幽幽',
          msg: '有人说：“一辈子很长，要跟一个有趣的人在一起”。我想关注我的人，应该是那种喜欢找乐子也乐意分享乐趣的人，你们一定挺优秀的。所以单身的应该在这条留言，互相勾搭一下。特别有钱人又帅可以直接私信我！',
          timesAgo: '1月前',
          date: '4月11日 00:00'
        }],
        option: {
          grid: {
            left: 60,
            right: '6%',
            height: '65%',
            bottom: 24
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          legend: {
            data: ['订单量', '入库量', '月收益']
          },
          xAxis: [{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: [{
              type: 'value',
              name: '订单数',
              min: 0,
              max: 1500,
              interval: 300,
              axisLabel: {
                formatter: '{value} 单'
              }
            },
            {
              type: 'value',
              name: '收益',
              min: 0,
              max: 50,
              interval: 10,
              axisLabel: {
                formatter: '{value} 元'
              }
            }
          ],
          series: [{
              name: '订单量',
              type: 'bar',
              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
              color: 'rgb(54, 127, 169)'
            },
            {
              name: '入库量',
              type: 'bar',
              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
              color: 'rgb(0, 0, 0)'
            },
            {
              name: '月收益',
              type: 'line',
              yAxisIndex: 1,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
              color: 'rgb(26, 179, 148)'
            }
          ]
        }
      }
    },
    methods: {
      painChart() {
        this.chart = this.$echarts.init(this.$refs.flotChart)
        this.chart.setOption(this.option)
      },
      closeMsg() {
        this.msgBoxFlag = false
      }
    },
    directives: {
      drag: {}
    },
    watch: {
      msgFlag: function(flag) {
        if (flag == true) {
          this.msgArray = 'el-icon-arrow-up'
        } else {
          this.msgArray = 'el-icon-arrow-down'
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(100px);
  }

  /* v-enter-active 【入场动画的时间段】 */
  /* v-leave-active 【离场动画的时间段】 */
  .v-enter-active,
  .v-leave-active {
    transition: all 0.8s ease;
  }

  .welcome {
    height: 100%;
  }
</style>
